<template>
    <div class="ka">
    <div class="logo">
        <div></div>
        <p>龙卡通</p>
    </div>
    <div class="ka-num">
        <strong>{{userid}}</strong>&nbsp;&nbsp;
        <span @click="fun()">查看卡号</span>
    </div>
    <div>
        <p>可用余额(元)</p>
        <b>￥{{usermoney}}</b>
    </div>
    
        <ul>
            <li>详情</li>|
            <li>明细</li>|
            <li>特约取款</li>|
            <li>转账</li>
        </ul>
    
    </div>
    </template>
    
    <script>
     import { car_xinxi } from "@/apis/user";

    export default {
        data(){
            return {
                username:localStorage.token,
                userid:"",
                usermoney:"",
                id:""
            }
        },
    created(){
        car_xinxi({username:this.username}).then((ok)=>{
            console.log(ok)
            console.log(localStorage.token)
            this.usermoney=ok.data.data.tbAccount.cardMoney;
            this.userid=ok.data.data.tbAccount.accountCard;
            this.id=ok.data.data.tbAccount.accountCard+"";
            this.userid=this.id.slice(0,3)+"***"+this.id.slice(13,16)

            localStorage.id=this.id;
            // console.log(this.id)
        })
    },
    methods:{
        fun(){
            car_xinxi({username:this.username}).then((ok)=>{
            this.userid=ok.data.data.tbAccount.accountCard;

        })
    }
    }
    
    }
    </script>
    
    <style lang="scss" scoped>
        // 卡
    .ka {
      width: 90%;
      height: 1.82rem;
      margin: auto;
      background: #3269b1;
      border-radius: .1rem;
      background: url(@/assets/index/ka.jpg);
      box-sizing: border-box;
      padding-top: .2rem;
      color: #fff;
      >div {
        width: 90%;
        margin: auto;
      }
    }
    .logo {
    
        display: flex;
        >div {
            width: .24rem;
            height: .24rem;
            margin-right: .1rem;
            border-radius: 50%;
            background: url(@/assets/index/logo.jpeg) #fff no-repeat center;
            background-size: 15px 15px;
        }
        p {
            font-size: .05rem;
            border: .01rem solid #fff;
            padding: .02rem;
        }
    }
    .ka-num {
        padding:.1rem 0 .1rem;
    }
    ul {
        width: 100%;
        display: flex;
        color: #fff;
        margin-top: .2rem;
        li {
            width: 24%;
            text-align: center;
        }
    }
    </style>